<template>
	<view>
		<view class="title">{{name}}</view>
		<input type="text" v-model="setPhone" placeholder="请输入手机号码" placeholder-class="inputDefault" />
		<view class="Verify">
			<input type="text" v-model="setCode" placeholder="请输入验证码" placeholder-class="inputDefault" />
			<button class="btn" :class="{'btnGet':isGet}" @click="getCode()">{{codeText}}</button>
		</view>
		<button class="btnConfirm" @click="changePhone">确定</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				setPhone: '', //设置手机号
				setCode: '', //设置手机验证码
				isGet: false, //判断是否获取验证码
				codeText: '获取验证码', //手机号验证码
				count: 0, //获取验证码倒计时时间
				timer: null, //定时器
				name: '设置手机号', //状态名称
			}
		},
		onLoad(e) {
			if (e.type == 'update') {
				this.name = '修改手机号';
			} else if (e.type == 'unBind') {
				this.name = '解绑手机号';
				this.setPhone = uni.getStorageSync('userInfo').phone;
			}
			uni.setNavigationBarTitle({
				title: this.name
			})
		},
		methods: {
			// 设置手机号
			changePhone() {
				var data = {
					phone: this.setPhone,
					access_code: this.setCode
				}
				if (this.name == '解绑手机号') {
					data.is_unbing = 2;
				}
				this.$zapi.apiPost('user/currency.basic/bindUserPhone', data).then(res => {
					this.showDialog(res.data.msg);
					if (res.data.code == 200) {
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1000);
					}
				})
			},
			// 判断是否发送验证码
			getCode() {
				if (this.setPhone != "") {
					var yanData = {
						phone: this.setPhone,
						code_type: 'access_code'
					}
					this.$zapi.apiPost('user/currency.Code/SendCode', yanData).then(res => {
						if (res.data.code == 200) {
							this.getInterval(); //定时器
						} else {
							this.showDialog(res.data.msg);
						}
					})
				} else {
					this.showDialog('请输入手机号');
				}
			},
			// 获取验证码倒计时
			getInterval() {
				var that = this;
				uni.showToast({
					title: '短信发送成功',
					icon: 'none',
					duration: 1000,
					success: function(res) {
						const TIME_COUNT = 60;
						that.count = TIME_COUNT;
						that.timer = setInterval(() => {
							if (that.count > 0 && that.count <= TIME_COUNT) {
								// 倒计时时不可点击
								that.isGet = true;
								// 计时秒数
								that.count--;
								// 更新按钮的文字内容
								that.codeText = that.count + 's后重新获取';
							} else {
								// 倒计时完，可点击
								that.isGet = false;
								// 更新按钮文字内容
								that.codeText = '获取验证码';
								// 清空定时器!!!
								clearInterval(that.timer);
								that.timer = null;
							}
						}, 1000);
					}
				});
			},
			// 提示框
			showDialog(msg, icon) {
				var newIncon = 'none';
				if (icon) {
					newIncon = icon;
				}
				uni.showToast({
					title: msg,
					icon: newIncon
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
		margin: 30upx 30upx 0;
		width: calc(100% - 60upx);
	}

	.title {
		color: #333333;
	}

	input {
		height: 86upx;
		line-height: 86upx;
		text-indent: 30upx;
		border: 2upx solid #DCDFE6;
		border-radius: 10upx;
		margin-top: 30upx;
	}

	.inputDefault {
		color: #C0C4CC;
		font-size: 28upx;
	}

	.Verify {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.Verify input {
		width: 58%;
	}

	.btn {
		color: #C0C4CC;
		font-size: 28upx;
		height: 90upx;
		line-height: 90upx;
		width: 260upx;
		padding: 0;
		margin-right: 0;
		background-color: #FAFAFA;
		border: 2upx solid #DCDFE6;
		border-radius: 10upx;
	}

	.btnGet {
		color: #FFFFFF;
		background: #FF9900;
		border-color: #FF9900;
	}

	button:after {
		border: none;
	}

	.btnConfirm {
		color: #FFFFFF;
		background: #FF9900;
		position: absolute;
		bottom: 68upx;
		left: 30upx;
		width: calc(100% - 60upx);
	}
</style>
